<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <#--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <#--<!-- 引入样式 &ndash;&gt;-->
    <#--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>-->
    <!-- 引入组件库 -->
<#include "header.ftl">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            position: relative;
        }

        .dialog {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .8);
        }

        .loginPage {
            position: absolute;
            top: 40%;
            left: 50%;
            margin-top: -150px;
            margin-left: -175px;
            width: 350px;
            min-height: 300px;
            padding: 30px 20px 20px;
            border-radius: 8px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, .6);

        }

        .loginPage p {
            color: red;
            text-align: left;
        }

    </style>
</head>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<body>
<div id="app">
    <img src="/img/1.jpg" height="970px" width="100%"/>
    <div class="dialog">
        <div class="loginPage">
            <h1>登录</h1>
            学生 <input type="radio" name="q" checked>
            老师 <input type="radio" name="q">
            <br>
            <el-form>
                <el-form-item label="用户名">
                    <el-input type="text" id="user" v-model="formName.user"
                              @blur="inputBlur('user',formName.user)"></el-input>
                    <p>{{formName.userError}}</p>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" id="password" v-model="formName.password"
                              @blur="inputBlur('password',formName.password)"></el-input>
                    <p>{{formName.passwordError}}</p>
                </el-form-item>
                <el-checkbox id="rememberMe" v-model="checked">记住我</el-checkbox>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form>
        </div>
    </div>
</div>

<#include "footer.ftl">
<#--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->

<#--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

<script>
    let _this = new Vue({
        el: '#app',
        data: {
            formName: {//表单中的参数
                user: '',
                userError: '',
                password: '',
                passwordError: '',
                beDisabled: true,

            },
            checked: false,
            beShow: false//传值给父组件
        },
        created: function () {

        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            resetForm: function () {
                this.formName.user = '';
                this.formName.userError = '';
                this.formName.password = '';
                this.formName.passwordError = '';
            },
            submitForm: function () {
                let student = $("input[name='q']:eq(0)").is(':checked');
                let teacher = $("input[name='q']:eq(1)").is(':checked');
                let loginParams, _url,type;
                if (student) {
                    loginParams = {
                        user: this.formName.user,
                        password: this.formName.password,
                        rememberMe: this.checked
                    };
                    _url='/api/student/login';
                    type='student-user'
                } else {

                    loginParams = {
                        teacherRealname: this.formName.user,
                        teacherPwd: this.formName.password,
                        rememberMe: this.checked
                    };
                    _url='/api/teacher/login';
                    type='teacher-user';
                }


                // return;
                $.ajax({
                    type: 'post',
                    url: _url,
                    data: loginParams,
                    dataType: 'json',
                    success: function (res) {
                        console.log(res)
                        if (res.status != 200) {
                            _this.$message({
                                message: res.message,
                                type: 'error'
                            })
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            if (!window.localStorage) { //一种持久化存储信息  只接受字符串
                                console.log("浏览器不支持localstorage");
                            } else {
                                var storage = window.localStorage;
                                var d = JSON.stringify(res.resData);
                                storage.setItem(type, d);
                            }
                            //跳转
                            location.href = '/index';
                        }
                    }
                })
            },
            inputBlur: function (errorItem, inputContent) {
                if (errorItem === 'user') {
                    if (inputContent === '') {
                        this.formName.userError = '用户名不能为空'
                    } else {
                        this.formName.userError = '';
                    }
                } else if (errorItem === 'password') {
                    if (inputContent === '') {
                        this.formName.passwordError = '密码不能为空'
                    } else {
                        this.formName.passwordError = '';
                    }
                }
                //对于按钮的状态进行修改
                if (this.formName.user != '' && this.formName.password != '') {
                    this.formName.beDisabled = false;
                } else {
                    this.formName.beDisabled = true;
                }
            }

        }
    })
</script>


</body>
</html>